import React, {Component} from 'react';
import * as tools from '../../../tools/tools.js';
import $ from 'jquery';
import {
    Button,
    Tree 
} from 'antd';
import NodeAddOrModify from '../NodeAdd/NodeAdd';
import TreePanel from '../../../components/TreePanel/TreePanel';
const TreeNode = Tree.TreeNode;

class NodeManagementIndex extends Component {
    constructor(props) {
        super(props);
        this.state = {
            treeData : [],
            isModify : 0,
            visible : false,
            roleInfo : {}
        }
    }
    handleCancel = (e) => {
        this.setState({
            visible: false,
        });
    }
    showModal = (e) => {
        var id = e.target.id;
        if(id == 'modify') {
            if(this.state.cKey) {
                var key = this.state.cKey;
                this.getNodeDetail(key).then(res => {
                    this.setState({
                        isModify : 1,
                        title : '修改',
                        visible: true,
                        roleInfo : res
                    })
                })
            }
        }else {
            console.log('添加')
            this.setState({
                isModify : 0,
                title : '添加',
                visible: true,
                roleInfo : {}
            })
            
        }
    }

    componentDidMount = () => {
        this.upDateNodes();
    }

    getNodes = () => {
        return new Promise(resolve => {
            $.ajax({
                url : tools.apiUrl + 'manage/jurisdiction_list',
                data : {
                    token : localStorage.token
                },
                type: 'post',
                success: function(res) {
                    if(res.status == 1) {
                        resolve(res);
                    }
                }
            })
        })
    }
    
    upDateNodes = () => {
        this.getNodes().then(res => {
            this.setState({
                treeData : res.result
            })
        });
    }
 
    getModalState = () => {
        const modify =  this.state.isModify;
        console.log(modify)
        if(modify == 1) {
            return {
                title : '修改',
                className : 'normal-modal-control',
                visible : this.state.visible,
            }
        }else {
            return {
                title : '添加',
                className : 'normal-modal-control',
                visible : this.state.visible,
            }
        }
    }

    //
    setAllNodeOption = (data) => {
        var residences = data.map(val => {
            var obj = {};
            obj.value = val.id;
            obj.label = val.name;
            if(val.child.length > 0) {
                return this.getAllNodeRender(val.child, obj);
            }else {
                return obj
            }
        });
        return residences
    }
    //
    getAllNodeRender = (data, obj) => {
        obj.children = data.map(val => {
            var newObj = {};
            newObj.value = val.id;
            newObj.label = val.name;
            if(val.child.length > 0) {
                return this.getAllNodeRender(val.child, newObj);
            }else {
                return newObj
            }
        })
        return obj
    }

    onSelect = (selectedKeys, info) => {
        console.log('selected', selectedKeys, info);
        //获取数据
        this.setState({
            cKey : selectedKeys[0]
        });
        
    }

    getNodeDetail = (id) => {
        return new Promise(resolve => {
            $.ajax({
                url : tools.apiUrl + 'manage/jurisdiction_info',
                data : {
                    id,
                    token : localStorage.token
                },
                type : 'post',
                success : function(res) {
                    if(res.status == 1) {
                        var obj = {};
                        obj.pids = [];
                        obj.type = res.result.type;
                        obj.name = res.result.name;
                        obj.url = res.result.url;
                        obj.id = res.result.id;
                        for(let i = 0; i < res.result.parent_data.length -1; i++) {
                            obj.pids.push(res.result.parent_data[i].id);
                        }
                        resolve(obj);
                    }
                }
            })
        })
    }

    render() {
        //模态框控制
        const modalStyle = {
            title : this.state.title,
            className : 'normal-modal-control',
            visible : this.state.visible,
        }
        return (
            <div>
                <div className="city-biaotou">
                    <div className="city-biaotou-left">
                        <Button key="btn2" onClick={this.showModal} id="add">添加节点</Button> 
                        <Button key="btn3" onClick={this.showModal} id="modify">修改节点</Button>
                        {/* <Button key="btn6" onClick={this.removeCount}>删除</Button> */}
                    </div>
                </div>
                <div>
                {/* 对应路由树 与操作树 */}
                <TreePanel 
                    treeData={this.state.treeData}
                    onSelect={this.onSelect}
                />
                <NodeAddOrModify
　                  modalStyle={modalStyle}
                    onCancel={this.handleCancel}
                    parentData={this.setAllNodeOption(this.state.treeData)}
                    upDateNodes={this.upDateNodes}
                    roleInfo={this.state.roleInfo}
                    isModify={this.state.isModify}
                    mdId={this.state.cKey}
                />
                </div>
            </div>
        )
    }
}
export default NodeManagementIndex